<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 1000px;
            margin: 0 auto;
        }

       span{
          

            width: 100px;
            height: 50px;
            background-color: yellow;
            border-radius: 5px;

        }
    </style>
</head>
<body>
    <!-- 页面上有一个倒计时时钟，显示距离双十一还有多长时间，要求自动变化，具体表现如下图： -->
    <!-- 训练提示

1.获取要操作的元素（天时分秒盒子）

2.获取结束日期的时间戳

3.开启定时器

4.获取当前日期的时间戳，并计算两个日期的差

5.将毫秒的时间差分别计算为天时分秒

6.设置盒子的内容 -->

<div>
    <h4>距离双十一还有</h4>
 <span class="day">天</span>
<span class="hour">时</span>
<span class="minute">分</span>
<span class="second">秒</span>
</div>
<script>
var day=document.querySelector('.day');
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
// 2.获取结束日期的时间戳
var inputTime = +new Date('2022-11-11 00:00:00'); // 返回的是用户输入时间总的毫秒数
countDown();
// 开启定时器
setInterval(countDown,2000);
function countDown(time) {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var d = parseInt(times / 60 / 60 / 24); // 天
            d = d < 10 ? '0' + d : d;
            day.innerHTML=d;
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML=h;
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML=m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML=s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }






</script>

</body>
</html>